//一、创建公共的头部 哪里需要哪里引入
import React, { Component } from 'react'
import './Header.less'
//1.引入声明式导航和withRouter 都是为了实现页面的跳转
/* 
  如果是路由组件则可以直接使用Link实现跳转页面，例如注册按钮
  但如果不是路由组件,如这里的Header组件需要实现跳转的时候,需要携带withRouter 
*/
import { Link, withRouter} from 'react-router-dom'

//css BEM命名 eg:header-left-text 避免react中样式重复

class Header extends Component {
    render() {
        let {back,register,title}=this.props
        return (
            <div className='header'> 
             {/* 如果父组件传了back 则会显示返回按钮,否则不显示,父传子知识点 */}
             {back? <span className='iconfont icon-fanhui' onClick={()=>{
                 //输出props
                 //console.log(this.props);
                 this.props.history.go(-1)
             }}></span>:null}
                <div>{title}</div>
             {/* 如果父组件传了register 则会显示注册按钮,否则不显示,父传子知识点 这里没传register所以不显示*/}
                {register? <Link to='/register' className='register'>注册</Link>:null }
            </div>
        )
    }
}

//2.向外暴露的时候使用了withRouter使Header成为了高阶组件,携带了路由的信息,所以实现了路由的跳转
export default withRouter(Header)

